<template>
  <div class="app-container">
    <el-card shadow="never" class="table-container">
      <el-form :model="form" label-width="auto" style="max-width: 600px">
        <el-form-item label="所在省">
          <el-select
            @change="provinceChange"
            v-model="form.province"
            placeholder="请选择省份"
          >
            <el-option
              v-for="v in provinceList"
              :key="v.provinceId"
              :label="v.pname"
              :value="v.provinceId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="所在市">
          <el-select v-model="form.city" placeholder="请选择市">
            <el-option
              v-for="v in cityList"
              :key="v.cityId"
              :label="v.cityName"
              :value="v.cityId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input v-model="form.location" />
        </el-form-item>
        <el-form-item label="AQI分级">
          <el-table
            :data="tableData"
            style="width: 100%"
            :row-class-name="tableRowClassName"
          >
            <el-table-column prop="date" label="序号" width="60" />
            <el-table-column prop="name" label="评级" width="60" />
            <el-table-column prop="address" label="描述" />
          </el-table>
        </el-form-item>
        <el-form-item label="指数等级">
          <el-radio-group v-model="form.aqi">
            <el-radio value="1"
              ><span style="background-color: green; padding: 10px"
                >一</span
              ></el-radio
            >
            <el-radio value="2"
              ><span style="background-color: yellow; padding: 10px"
                >二</span
              ></el-radio
            >
            <el-radio value="3"
              ><span style="background-color: orange; padding: 10px"
                >三</span
              ></el-radio
            >
            <el-radio value="4"
              ><span style="background-color: red; padding: 10px"
                >四</span
              ></el-radio
            >
            <el-radio value="5"
              ><span style="background-color: palevioletred; padding: 10px"
                >五</span
              ></el-radio
            >
            <el-radio value="6"
              ><span style="background-color: purple; padding: 10px"
                >六</span
              ></el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item label="上传图片">
          <el-upload
            class="avatar-uploader"
            :action="baseUrl + '/supervisor-api/file/upload'"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="反馈信息">
          <el-input v-model="form.feedback" type="textarea" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="feedbackSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import FeedbackAPI from "@/api/feedback";
import DistrictAPI from "@/api/district";
import { ElMessage } from "element-plus";
import type { UploadProps } from "element-plus";

const imageUrl = ref("");
const baseUrl = ref("");
baseUrl.value = import.meta.env.VITE_APP_BASE_API;

const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  console.log(response);
  console.log(uploadFile);
  form.fileUploadImgId = response.data.data[0].imgId;
  console.log(form.fileUploadImgId);
  imageUrl.value = URL.createObjectURL(uploadFile.raw!);
};

const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
  if (rawFile.type !== "image/jpeg") {
    ElMessage.error("只能上传图片!");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("图片大于 2MB!");
    return false;
  }
  return true;
};

const form: any = reactive({
  province: "",
  city: "",
  location: "",
  aqi: "",
  feedback: "",
  fileUploadImgId: "",
});

const provinceList: any = ref([]);

const cityList: any = ref([]);

const onSubmit = () => {
  console.log("submit!");
};

const tableData = [
  {
    date: "一",
    name: "优",
    address: "空气质星令人满意，基本无空气污染",
  },
  {
    date: "二",
    name: "良",
    address:
      "空气质量可接受，但某些污染物口能对极少数异常敏感人群健康有较弱影响",
  },
  {
    date: "三",
    name: "轻度污染",
    address: "易感人群症状有轻度加剧，健康人群出现刺激定状",
  },
  {
    date: "四",
    name: "中度污染",
    address: "进一步加副易感人群症状，可能对健康人群心脏、呼吸系统有影响",
  },
  {
    date: "五",
    name: "重度污染",
    address:
      "心胜痰和肺病患者症状显著加剧，运动耐要力降低，健康人群普遍出现症状",
  },
  {
    date: "六",
    name: "严重污染",
    address: "健康人群运动耐受力降低，有明显强烈症状，提前出现某些疾病",
  },
];

const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: any;
  rowIndex: number;
}) => {
  if (rowIndex === 0 || rowIndex === 2 || rowIndex === 4) {
    return "warning-row";
  } else if (rowIndex === 1 || rowIndex === 3 || rowIndex === 5) {
    return "success-row";
  }
  return "";
};

function reqProvinceList() {
  DistrictAPI.provinceList().then((res) => {
    for (const v of res) {
      provinceList.value.push(v);
    }
  });
}

function reqCityList() {
  DistrictAPI.cityList(form.province).then((res) => {
    for (const v of res) {
      cityList.value.push(v);
    }
  });
}

onMounted(() => {
  reqProvinceList();
});

function provinceChange(v: any) {
  console.log(v);
  console.log(form.province);
  cityList.value = [];
  form.city = "";
  reqCityList();
}

function feedbackSubmit() {
  FeedbackAPI.submitFeedback(form).then((res) => {
    console.log(res);
    form.province = "";
    form.city = "";
    form.location = "";
    form.aqi = "";
    form.feedback = "";
    ElMessage({
      showClose: true,
      message: "反馈成功",
      type: "success",
    });
  });
}
</script>

<style>
.el-table .warning-row {
  --el-table-tr-bg-color: #fff;
}
.el-table .success-row {
  --el-table-tr-bg-color: #eee;
}
</style>
